<template>
  <div class="home-detail">
    <HomeDetailNavbar></HomeDetailNavbar>
    <Scroll class="home-detail-scroll" ref="scroll">
      <HomeDetailSwiper :imgs="headSwiperImgs"></HomeDetailSwiper>
      <HomeDetailTitle :data="titleMsg"></HomeDetailTitle>
      <HomeDetailRecommend :recommends="recommends"></HomeDetailRecommend>
      <home-detail-img-list :img-items="imgItems" @imgFinishLoad="allImgFinishLoad"></home-detail-img-list>
    </Scroll>
  </div>
</template>

<script>

  import HomeDetailNavbar from './subcomponents/HomeDetailNavbar'
  import HomeDetailSwiper from './subcomponents/HomeDetailSwiper'
  import HomeDetailTitle from  './subcomponents/HomeDetailTitle'
  import HomeDetailImgList from './subcomponents/HomeDetailImgList'
  import HomeDetailRecommend from './subcomponents/HomeDetailRecommend'

  import Scroll from 'components/common/scroll/Scroll'

  import {getHomeDetailData} from "network/HomeRequest.js"


  export default {
    name: "HomeDetail",
    data:function () {
      return {
        headSwiperImgs: [],
        titleMsg:{},
        imgItems:[],
        recommends:[]
      }
    },
    created() {

      let detailData = getHomeDetailData();
      this.headSwiperImgs = detailData.headSwiperImgs;
      this.titleMsg = detailData.msg;
      this.imgItems = detailData.imgItems;
      this.recommends = detailData.recommends;
    },
    methods:{

      allImgFinishLoad(){

        this.$refs.scroll.scrollRefresh();
      }

    },
    components:{
      HomeDetailNavbar,
      HomeDetailSwiper,
      HomeDetailTitle,
      HomeDetailImgList,
      Scroll,
      HomeDetailRecommend
    }
  }
</script>

<style scoped>

  .home-detail{

    position: relative;
    z-index: 11;
    height: 100vh;
    background-color: #fff;
  }

  .home-detail-scroll{

    height: calc(100% - 44px);
  }
</style>
